<template>
	<view>
		<nav-bar :shadow="false"></nav-bar>
		<public-module></public-module>
		<account-page :title="title" :desc="desc">
			<view class="account-form-box">
				<u-form :model="model" ref="uForm" :errorType="form.errorType" class="from">
					<u-form-item class="form-item" label="手机号" prop="mobile" :label-position="form.labelPosition">
						<u-input v-model="model.mobile" placeholder="您的常用手机号" type="text" />
					</u-form-item>
					<u-form-item class="form-item" label="短信验证码" prop="verifyCode" :label-position="form.labelPosition">
						<u-input v-model="model.verifyCode" placeholder="请输入验证码" type="number" />
						<u-button slot="right" type="success" size="mini" @click="getCode">{{ codeTips }}</u-button>
					</u-form-item>
				</u-form>
			
				<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
			
				<u-gap height="40"></u-gap>
			
				<u-button type="primary" @click="submit">确认绑定</u-button>
			</view>
			
			<u-gap height="40"></u-gap>
		</account-page>
	</view>
</template>

<script>
var clear;
import { mapState, mapMutations } from 'vuex';
import socket from '@/config/socket';
// #ifdef H5
import {publicShare} from '@/config/utils';
// #endif
import accountPage from '@/components/module/account-page.vue';
export default {
	components: {
		accountPage,
		...mapState(['userInfo','chatScenesInfo'])
	},
	data() {
		return {
			title: '绑定手机号',
			desc: '',
			codeTips: '',
			form: {
				errorType: ['message'],
				labelPosition: 'top'
			},
			model: {
				/* 手机号 */
				mobile: '',
				/* 验证码 */
				verifyCode: ''
			},
			rules: {
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号格式不正确',
						trigger: ['change', 'blur']
					}
				],
				verifyCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur']
					},
					{
						type: 'number',
						message: '验证码只能为数字',
						trigger: ['change', 'blur']
					},
					{
						len: 6,
						message: '验证码长度为6位数字',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	methods: {
		...mapMutations(['setUserInfo']),
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证成功');
					//需要登录后才能绑定号码
					if (!(this.userInfo.wxSmallOpenId || this.userInfo.openId || this.userInfo.wxPublicOpenId)) {
						uni.showToast({
							title: '数据丢失',
							icon: 'none'
						});
						return;
					}
					let httpData = {
						openId: this.userInfo.openId || this.userInfo.wxSmallOpenId || this.userInfo.wxPublicOpenId,
						phone: this.model.mobile,
						code: this.model.verifyCode,
						// #ifdef MP-WEIXIN
						type: 1201,
						// #endif
						// #ifdef H5
						type: 1301,
						// #endif
						// #ifdef APP-PLUS
						type: 1101
						// #endif
					};
					
					if(this.userInfo.unionid || this.userInfo.wxUnionid){
						httpData.unionid = this.userInfo.unionid || this.userInfo.wxUnionid;
					}
					// #ifdef H5
					let recommendCode = uni.getStorageSync("recommendCode");
					if(recommendCode){
						httpData.recommendCode = recommendCode;
					}
					// #endif
					// #ifndef H5
					if(this.chatScenesInfo.recommendCode){
						httpData.recommendCode = this.chatScenesInfo.recommendCode;
					}
					// #endif
					// 登录接口
					// this.$http
					// 	.post('api/open/v1/third_bind',httpData)
					// 	.then(res => {
					// 		this.setUserInfo(res);
					// 		// #ifdef H5
					// 		publicShare();
					// 		// #endif
					// 		socket.init();
					// 		uni.showModal({
					// 			title: '提示',
					// 			content: '账号绑定成功！',
					// 			showCancel: false,
					// 			success: res => {
					// 				uni.navigateBack();
					// 			}
					// 		});
					// 	});
				} else {
					console.log('验证失败');
				}
			});
		},
		codeChange(text) {
			this.codeTips = text;
		},
		getCodeState(){
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				});
				//发送验证码
				// this.$http
				// 	.post('api/open/v1/send_sms', {
				// 		phone: this.model.mobile,
				// 		type: 3104
				// 	})
				// 	.then(res => {
				// 		uni.hideLoading();
				//		//这里此提示会被this.start()方法中的提示覆盖
				//		this.$u.toast('验证码已发送');
				//		// 通知验证码组件内部开始倒计时
				//		this.$refs.uCode.start();
				// 	});
				
				//模拟
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
				
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		// 获取验证码
		getCode() {
			if (this.model.mobile == '') {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			if (!this.$base.phoneRegular.test(this.model.mobile)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			this.getCodeState();
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.account-form-box {
		padding: 0 32rpx;
	}
</style>
